import React from 'react';
import { message, Button, Icon } from 'antd';
import { UploadWork } from '@/pages/RecruitEmail/pc/components';

import { saveWork } from '@/pages/RecruitEmail/service';
import styles from './index.less';

export default function SubmitWorkPC(props) {
    const { result, getJobAndQuestion } = props;
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const { duteName = '', id, topicInfo, arrangeId, companyName } = result;
    // const { id = '' } = query;
    const [fileList, setFileList] = React.useState([]);
    const [submitLoading, setSubmitLoading] = React.useState(false);
    // const [workId, setWorkId] = React.useState(-1);
    // const [arrangeId, setArrangeId] = React.useState(-1);
    // const [jobName, setJobName] = React.useState('');
    // const [question, setQuestion] = React.useState([]);
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    // const [companyName, setCompanyName] = React.useState('微微科技有限公司');
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const [uploading, setUploading] = React.useState(false);

    const handleSubmit = async () => {
        // setSubmitLoading(true);
        // 提交逻辑
        if (fileList.length === 0) {
            message.error('请上传作业');
        } else {
            setSubmitLoading(true);
            // 过滤出错文件
            const list = fileList.filter(m => m.status !== 'error');
            const finalList = list.map(item => ({
                id: item.uid,
                url: item.response ? item.response : item.url,
                name: item.name
            }));
            const uploadFileArray = fileList.length > 0 ? finalList : '';

            const dto = {
                answerFileUrl: JSON.stringify(uploadFileArray),
                arrangeId,
                id
            };
            try {
                const resultDto = await saveWork(dto);
                const { code, msg } = resultDto;
                if (code === 10000) {
                    setSubmitLoading(false);
                    if (getJobAndQuestion) getJobAndQuestion();
                    // history.push({
                    //     pathname: '/external/interview/submitworkresult',
                    //     query: { state: 1, companyName }
                    // });
                } else {
                    setSubmitLoading(false);
                    message.error(msg);
                }
            } catch (error) {
                console.log(error);
                setSubmitLoading(false);
                message.error('网络错误，提交失败');
            }
        }
    };

    const renderUploadView = () => (
        <div className={styles.customDragger}>
            {/* <Spin spinning={loading}> */}
            <UploadWork
                dragAble
                fileList={fileList}
                setFileList={_fileList => {
                    if (_fileList.length <= 5) {
                        setFileList(_fileList);
                    } else {
                        message.error('最多只能上传五个附件');
                    }
                }}
                checkFileSize={50}
                checkFileType="rar、zip、pdf、jpg、doc、docx、png"
                checkFileTypeMsg="只能上传rar、zip、pdf、jpg、doc、docx、png格式的文件！"
                checkFileSizeMsg="文件大小不能超过50MB！"
                showUploadList
                onChange={changeData => {
                    setUploading(changeData.fileList.some(item => item.status !== 'done'));
                }}
            >
                <p className="ant-upload-drag-icon">
                    <Icon type="upload" style={{ color: '#49536C' }} />
                </p>
                <p className="ant-upload-text">点击或将文件拖拽到这里上传</p>
                <p className="ant-upload-hint">支持扩展名：.rar .zip .doc .docx .pdf .jpg .png，大小50Mb以内</p>
            </UploadWork>
            <Button
                type="primary"
                loading={submitLoading}
                style={{
                    padding: '0 30px',
                    width: '200px',
                    textAlign: 'center',
                    margin: '40px auto',
                    height: '50px',
                    fontSize: '18px'
                }}
                onClick={handleSubmit}
            >
                提交
            </Button>
            {/* </Spin> */}

            {/* {previewUrl && (
                <iframe
                    title="预览"
                    style={{
                        width: '100%',
                        height: '600px',
                        border: 0
                    }}
                    src={url}
                />
            )} */}
        </div>
    );

    const renderConcatInfoView = () => (
        <>
            <div className={styles.item}>
                <div className={styles.headTitle}>面试岗位：</div>
                <span className={styles.subTitle}>{duteName}</span>
            </div>

            <div className={styles.item}>
                <div className={styles.headTitle}>面试题目：</div>
                <span className={styles.ques}>{topicInfo}</span>
            </div>
            <div className={styles.upl}>
                <div className={styles.headTitle}>上传文件：</div>
                {renderUploadView()}
            </div>

            {/* <div className={styles.questionDiv}>
                <span className={styles.ic}></span>
                <span className={styles.questionTitle}>面试题目：</span>
            </div> */}
            {/*
            <span className={styles.question}>{question}</span> */}
        </>
    );

    return (
        <div className={styles.pageWrap}>
            {renderConcatInfoView()}
            {/* <InterviewBoxPc show={false}>
                <div className={styles.desc}>{renderConcatInfoView()}</div>
            </InterviewBoxPc> */}
        </div>
    );
}
